{% stylesheet %}
  .block_time_line {
    word-break: break-word;
  }
  .block_time_line .block_title h2 {
    color: var(--title-color);
  }
  .block_time_line .block_title .block_detail {
    color: var(--detail-color);
  }
  .block_time_line .content {
    padding: var(--padding);
    background-color: var(--bg-color);
  }
  @media screen and (max-width: 767px) {
    .block_time_line .content {
      padding: var(--mobile-padding);
    }
  }
  .block_time_line .block_detail {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  @media screen and (max-width: 767px) {
    .block_time_line .time_line_style1 .content_pc {
      display: none;
    }
  }
  .block_time_line .time_line_style1 .content_pc .swiper {
    overflow: hidden;
    padding: 2px 0;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-wrapper {
    transition-timing-function: linear;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide {
    min-width: var(--line-width);
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    padding-right: 15px;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .year {
    font-size: 36px;
    line-height: 24px;
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--text-color);
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .arrow {
    height: 20px;
    background-color: var(--text-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .arrow .point {
    background-color: #fff;
    display: inline-flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    justify-content: center;
    z-index: 0;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .arrow .point::after {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(40px);
    width: 10px;
    height: 10px;
    background-color: var(--text-color);
    border-radius: 50%;
    content: '';
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .arrow .point::before {
    content: '';
    position: absolute;
    height: 30px;
    width: 1px;
    background-color: var(--text-color);
    transform: translateY(10px);
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .arrow::before {
    height: 14px;
    width: 14px;
    content: '';
    background-color: var(--bg-color, var(--page_background_color));
    position: absolute;
    left: -7px;
    transform: rotate(45deg);
    box-sizing: border-box;
    display: inline-flex;
    transform-origin: center center;
    z-index: 0;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .arrow_box .arrow::after {
    height: 14px;
    width: 14px;
    content: '';
    background-color: var(--text-color);
    position: absolute;
    right: -7px;
    transform: rotate(45deg);
    box-sizing: border-box;
    z-index: 10;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .text_box {
    padding: 0 10px;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .text_box .text_title {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-color);
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .text_box .text_detail {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .block_time_line .time_line_style1 .content_pc .swiper-slide .text_box .text_time {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-color);
  }
  .block_time_line .time_line_style1 .content_mobile img {
    width: 100%;
    object-fit: cover;
  }
  @media screen and (min-width: 768px) {
    .block_time_line .time_line_style1 .content_mobile {
      display: none;
    }
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item {
    display: flex;
    column-gap: 20px;
    margin-bottom: 14px;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .left {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .left .point {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-color);
    border-radius: 50%;
    margin-bottom: 6px;
    z-index: 10;
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .left
    .point::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .left .arrow {
    background-color: var(--text-color);
    flex: 1;
    position: relative;
    width: 12px;
    display: flex;
    justify-content: center;
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .left
    .arrow::before {
    width: 8px;
    height: 8px;
    content: '';
    position: absolute;
    transform: rotate(45deg);
    transform-origin: center center;
    background-color: var(--bg-color, var(--page_background_color));
    top: -4px;
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .left
    .arrow::after {
    width: 8px;
    height: 8px;
    content: '';
    position: absolute;
    transform: rotate(45deg);
    transform-origin: center center;
    background-color: var(--text-color);
    bottom: -4px;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .right {
    flex: 1;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .right .year {
    font-size: 36px;
    line-height: 24px;
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .right .year .icon {
    display: flex;
    align-items: center;
    opacity: 0.7;
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .right
    .year
    .icon
    svg {
    width: 16px;
    height: 16px;
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .right
    .year
    .icon
    svg
    path {
    fill: var(--text-color);
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .right
    .year
    .icon
    .text_time {
    font-size: 14px;
    line-height: 20px;
    margin-left: 6px;
    font-weight: 400;
  }
  .block_time_line .time_line_style1 .content_mobile .mobile_time_line .mobile_time_line_item .item .right .text_title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-color);
  }
  .block_time_line
    .time_line_style1
    .content_mobile
    .mobile_time_line
    .mobile_time_line_item
    .item
    .right
    .text_detail {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 30px;
  }
  .block_time_line .time_line_style2 .open_more {
    transition: all 0.5s ease;
  }
  .block_time_line .time_line_style2 .content_pc {
    overflow: hidden;
  }
  .block_time_line .time_line_style2 .content_pc.open_more {
    height: 645px;
  }
  @media screen and (max-width: 767px) {
    .block_time_line .time_line_style2 .content_pc {
      display: none;
    }
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item {
    display: flex;
    column-gap: 20px;
    padding-bottom: 80px;
    justify-content: center;
    text-align: right;
    color: var(--text-color);
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item:last-child {
    padding-bottom: 0;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .line::after {
    content: '';
    position: absolute;
    height: calc(100% + 80px);
    width: 1px;
    background-color: var(--text-color);
    opacity: 0.2;
    top: 0;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item:first-child .line::after {
    content: '';
    position: absolute;
    height: calc(50% + 80px);
    width: 1px;
    background-color: var(--text-color);
    opacity: 0.2;
    top: 50%;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item:last-child .line::after {
    content: '';
    position: absolute;
    height: 50%;
    width: 1px;
    background-color: var(--text-color);
    opacity: 0.2;
    top: 0;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item.img_left {
    text-align: left;
    flex-direction: row-reverse;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item.img_left .right {
    justify-content: flex-end;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .left {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .left .year {
    font-size: var(--title_font_size);
    font-weight: bold;
    margin-bottom: 10px;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .left .text_title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 11px;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .left .text_detail {
    margin-bottom: 10px;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .line {
    width: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .line .point {
    width: 9px;
    height: 18px;
    position: relative;
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
    background-color: var(--bg-color, var(--page_background_color));
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .line .point span {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--text-color);
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .right {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .block_time_line .time_line_style2 .content_pc .time_line_item .right img {
    max-width: 100%;
    max-height: 250px;
    object-fit: cover;
  }
  .block_time_line .time_line_style2 .content_mobile {
    overflow: hidden;
  }
  .block_time_line .time_line_style2 .content_mobile.open_more {
    height: 645px;
  }
  @media screen and (min-width: 768px) {
    .block_time_line .time_line_style2 .content_mobile {
      display: none;
    }
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item {
    display: flex;
    column-gap: 10px;
    padding-bottom: 30px;
    color: var(--text-color);
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item:last-child {
    padding-bottom: 0;
  }
  .block_time_line
    .time_line_style2
    .content_mobile
    .mobile_time_line_item:not(.block_time_line .time_line_style2 .content_mobile .mobile_time_line_item:last-child)
    .line::after {
    content: '';
    position: absolute;
    height: calc(100% + 30px);
    width: 1px;
    background-color: var(--text-color);
    opacity: 0.2;
    top: 24.5px;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .line {
    width: 9px;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .line .point {
    width: 9px;
    height: 18px;
    position: relative;
    display: inline-flex;
    align-items: center;
    top: 17px;
    z-index: 2;
    background-color: var(--bg-color, var(--page_background_color));
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .line .point span {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--text-color);
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .right {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .right img {
    max-width: 100%;
    object-fit: cover;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .right .year {
    font-size: calc(var(--title_font_size) * var(--wap_title_scale));
    font-weight: bold;
    margin-bottom: 10px;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .right .text_title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .right .text_detail {
    margin-top: 11px;
  }
  .block_time_line .time_line_style2 .content_mobile .mobile_time_line_item .right .text_item {
    margin-top: 10px;
  }
  .block_time_line .time_line_style2 .more_btn {
    justify-content: center;
    display: flex;
    margin-top: calc(var(--general_layout_spacing) * 0.5);
  }
  .block_time_line .time_line_style2 .more_btn a {
    margin: 0;
  }
  .block_time_line .time_line_style2 .more_btn .secondary_btn.close {
    display: none;
  }
{% endstylesheet %}

{% assign blockId = block_id | default: section.block_id %}
{% assign data = section.settings %}
<div
  class="block_time_line"
  id="block_time_line-{{blockId}}"
  style="
    {% if data.bg_color != '' %}--bg-color: {{data.bg_color}};{% endif %}--padding: {{data.padding.top}}px {{data.padding.right}}px {{data.padding.bottom}}px {{data.padding.left}}px;
    --mobile-padding: {{data.mobile_padding.top}}px {{data.mobile_padding.right}}px {{data.mobile_padding.bottom}}px {{data.mobile_padding.left}}px;
    --title-color: {{data.title_color}};
    --detail-color: {{data.detail_color}};
  "
>
  <div class="container_wrapper">
    {% if data.time_line_style == 'style1' %}
      <div class="content time_line_style1">
        {% include 'block_title', title: data.block_title, detail: data.block_detail %}
        {%- comment -%}
          pc端
        {%- endcomment -%}
        <div class="content_pc">
          <div class="swiper" id="swiper-{{blockId}}">
            <ul class="swiper-wrapper" style="--slide-size: {{section.blocks.size}};--line-width: {{data.line_width}};">
              {% for block in section.blocks %}
                <li class="swiper-slide" style="--text-color: {{block.text_color}};">
                  <div class="arrow_box">
                    <div class="year">{{ block.time_text | date: '%Y' }}</div>
                    <div class="arrow">
                      <span class="point"></span>
                    </div>
                  </div>
                  <div class="text_box">
                    {% if block.title != '' %}
                      <div class="text_title">{{ block.title }}</div>
                    {% endif %}
                    {% if block.detail != '' %}
                      <div class="text_detail">{{ block.detail }}</div>
                    {% endif %}
                    <div class="text_item">{{ block.time_text }}</div>
                  </div>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
        {%- comment -%}
          移动端
        {%- endcomment -%}
        <div class="content_mobile">
          <ul class="mobile_time_line">
            {% for block in section.blocks %}
              <li class="mobile_time_line_item" style="--text-color: {{block.text_color}};">
                <div class="item">
                  <div class="left">
                    <div class="point"></div>
                    <div class="arrow">
                      <span></span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="year">
                      <div>
                        {{ block.time_text | date: '%Y' }}
                      </div>
                      <div class="icon">
                        <svg
                          t="1686205640600"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="11533"
                          width="16"
                          height="16"
                        >
                          <path d="M198.272 798.464a46.272 46.272 0 0 0 45.952 46.656h555.2a46.336 46.336 0 0 0 45.952-46.656V335.424a46.272 46.272 0 0 0-45.952-46.656H244.224a46.336 46.336 0 0 0-45.952 46.656zM105.856 335.424a138.944 138.944 0 0 1 138.368-139.328h555.2a138.816 138.816 0 0 1 138.368 139.328v463.04a138.944 138.944 0 0 1-138.368 139.328H244.224a138.816 138.816 0 0 1-138.368-139.328z" fill="#666666" p-id="11534"></path><path d="M286.336 150.528a47.168 47.168 0 0 1 94.208 0v181.376a47.168 47.168 0 0 1-94.208 0V150.528z m376.704 0a47.168 47.168 0 0 1 94.208 0v181.376a47.168 47.168 0 0 1-94.208 0V150.528z" fill="#666666" p-id="11535"></path><path d="M286.336 502.72a22.912 22.912 0 0 1 23.744-22.784h46.656a22.976 22.976 0 0 1 23.744 22.784v44.8a22.912 22.912 0 0 1-23.744 22.784H310.4a22.976 22.976 0 0 1-23.744-22.784v-44.8z m188.352 0a22.912 22.912 0 0 1 23.744-22.784h46.656a22.976 22.976 0 0 1 23.744 22.784v44.8a22.912 22.912 0 0 1-23.744 22.784h-46.656a22.976 22.976 0 0 1-23.744-22.784v-44.8z m188.352 0a22.912 22.912 0 0 1 23.744-22.784h46.656a22.976 22.976 0 0 1 23.744 22.784v44.8a22.912 22.912 0 0 1-23.744 22.784h-46.656a22.976 22.976 0 0 1-23.744-22.784v-44.8z m-376.704 180.544a22.912 22.912 0 0 1 23.744-22.784h46.656a22.976 22.976 0 0 1 23.744 22.784v44.8a22.912 22.912 0 0 1-23.744 22.784H310.4a22.976 22.976 0 0 1-23.744-22.784v-44.8z m188.352 0a22.912 22.912 0 0 1 23.744-22.784h46.656a22.976 22.976 0 0 1 23.744 22.784v44.8a22.912 22.912 0 0 1-23.744 22.784h-46.656a22.976 22.976 0 0 1-23.744-22.784v-44.8z m188.352 0a22.912 22.912 0 0 1 23.744-22.784h46.656a22.976 22.976 0 0 1 23.744 22.784v44.8a22.912 22.912 0 0 1-23.744 22.784h-46.656a22.976 22.976 0 0 1-23.744-22.784v-44.8z" fill="#666666" p-id="11536"></path>
                        </svg>
                        <div class="text_time">{{ block.time_text }}</div>
                      </div>
                    </div>
                    {% if block.title != '' %}
                      <div class="text_title">{{ block.title }}</div>
                    {% endif %}
                    {% if block.detail != '' %}
                      <div class="text_detail">{{ block.detail }}</div>
                    {% endif %}
                  </div>
                </div>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    {% if data.time_line_style == 'style2' %}
      <div class="content time_line_style2">
        {% include 'block_title', title: data.block_title, detail: data.block_detail %}
        {%- comment -%}
          pc端
        {%- endcomment -%}
        <div class="content_pc {% if data.is_more %}open_more{% endif %}">
          <ul class="time_line">
            {% for block in section.blocks %}
              <li class="time_line_item {{ block.img_position }}" style="--text-color: {{block.text_color}};">
                <div class="left">
                  {% if block.time_title != '' %}
                    <div class="year">{{ block.time_title }}</div>
                  {% endif %}
                  {% if block.title != '' %}
                    <div class="text_title">{{ block.title }}</div>
                  {% endif %}
                  {% if block.detail != '' %}
                    <div class="text_detail">{{ block.detail }}</div>
                  {% endif %}
                  {% if block.custom_text != '' %}
                    <div class="text_item">{{ block.custom_text }}</div>
                  {% endif %}
                </div>
                <div class="line">
                  <div class="point">
                    <span></span>
                  </div>
                </div>
                <div class="right">
                  {% include 'lazy_img', src: block.image.src, alt: block.image.alt %}
                </div>
              </li>
            {% endfor %}
          </ul>
        </div>
        {%- comment -%}
          移动端
        {%- endcomment -%}
        <div class="content_mobile {% if data.is_more %}open_more{% endif %}">
          <ul class="mobile_time_line">
            {% for block in section.blocks %}
              <li class="mobile_time_line_item" style="--text-color: {{block.text_color}};">
                <div class="line">
                  <div class="point">
                    <span></span>
                  </div>
                </div>
                <div class="right">
                  {% if block.time_title != '' %}
                    <div class="year">{{ block.time_title }}</div>
                  {% endif %}
                  <div>
                    {% include 'lazy_img', src: block.image.src, alt: block.image.alt %}
                  </div>
                  {% if block.title != '' %}
                    <div class="text_title">{{ block.title }}</div>
                  {% endif %}
                  {% if block.detail != '' %}
                    <div class="text_detail">{{ block.detail }}</div>
                  {% endif %}
                  {% if block.custom_text != '' %}
                    <div class="text_item">{{ block.custom_text }}</div>
                  {% endif %}
                </div>
              </li>
            {% endfor %}
          </ul>
        </div>
        {% if data.is_more %}
          <div class="more_btn">
            {% if data.open_btn_text != '' %}
              <a href="javascript:;" class="secondary_btn open" id="more_btn-open-{{ blockId }}">
                {{- data.open_btn_text -}}
              </a>
            {% endif %}

            {% if data.close_btn_text != '' %}
              <a href="javascript:;" class="secondary_btn close" id="more_btn-close-{{ blockId }}">
                {{- data.close_btn_text -}}
              </a>
            {% endif %}
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>

{%- comment -%}
  //另一种动画，备用
  <script>
  if ($(window).width() >= 768) {
  $(function() {
  let is_autoplay = '{{data.is_autoplay}}'
  let options = {};
  if (is_autoplay) {
  let swiperWidth = document.querySelector(`#swiper-{{blockId}}`).clientWidth
  let slideWidth = 0
  $(`#swiper-{{blockId}} .swiper-slide`).each((index, ele) => {
  slideWidth += ele.clientWidth
  })
  if (swiperWidth < slideWidth) {
  options.loop = true
  options.autoplay = {
  delay: 0,
  disableOnInteraction: false
  }
  options.speed = 3000
  options.on = {
  touchStart: function() {
  this.autoplay.stop()
  },
  touchEnd: function() {
  this.autoplay.start()
  }
  }
  }


  }



  let swiper = new Swiper(`#swiper-{{blockId}}`, {
  slidesPerView: "auto",
  freeMode: {
  momentum: false,
  momentumRatio: 0
  },
  grabCursor: true,
  ... options
  })

  })
  }
  </script>
{%- endcomment -%}
{% if data.time_line_style == 'style1' %}
  <script>
    if ($(window).width() >= 768) {
      $(function () {
        let is_autoplay = '{{data.is_autoplay}}';
        let options = {};
        if (is_autoplay) {
          options.autoplay = {
            delay: 3500,
            disableOnInteraction: false,
          };
        }
        let swiper = new Swiper(`#swiper-{{blockId}}`, {
          slidesPerView: 'auto',
          grabCursor: true,
          ...options,
        });
        let wh = window.innerHeight;
        let timer = null;

        if (is_autoplay) {
          swiper.autoplay.stop();

          setBgTransform(`#block_time_line-{{blockId}}`);
          $(window).on('scroll', function () {
            setBgTransform(`#block_time_line-{{blockId}}`);
          });
        }

        function setBgTransform(dom) {
          let elem = document.querySelector(dom);
          const { bottom, top, height } = elem.getBoundingClientRect();
          if (bottom <= 0 || top >= wh) {
            swiper.autoplay.stop();
            return;
          }
          swiper.autoplay.start();
        }
      });
    }
  </script>
{% endif %}

{% if data.time_line_style == 'style2' and data.is_more %}
  <script>
    $(function () {
      let isMobile = moi.isMobile();
      let isOpen = false;
      let domWrap = isMobile
        ? '#block_time_line-{{blockId}} .content_mobile'
        : '#block_time_line-{{blockId}} .content_pc';
      let dom = $(domWrap);
      let height = $(domWrap).find('ul').height();
      if (height < 645) {
        $('#more_btn-{{ blockId }}').remove();
        dom.height('auto');
        return;
      }
      $('#more_btn-open-{{ blockId }}').on('click', function () {
        isOpen = true;
        height = $(domWrap).find('ul').height();
        dom.height(height);
        $(this).css('display', 'none');
        $('#more_btn-close-{{ blockId }}').css('display', 'inline-block');
      });
      $('#more_btn-close-{{ blockId }}').on('click', function () {
        isOpen = false;
        dom.height('645');
        let top = document.querySelector('#block_time_line-{{blockId}}').offsetTop + 400;
        setTimeout(() => {
          window.scrollTo(0, top);
        }, 300);
        $(this).css('display', 'none');
        $('#more_btn-open-{{ blockId }}').css('display', 'inline-block');
      });

      $(domWrap)
        .find('li')
        .each(function () {
          const element = this;
          const resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
              isOpen && dom.height($(domWrap).find('ul').height()) && console.log(1);
            }
          });
          resizeObserver.observe(element);
        });
    });
  </script>
{% endif %}

{% schema %}
{
  "class": "block_time_line",
  "is_global": false,
  "icon": "icon-Time_Line",
  "name": {
    "zh_CN": "时间轴",
    "en_US": "Timeline"
  },
  "max_blocks": 20,
  "blocks": [
    {
      "name": {
        "zh_CN": "时间线",
        "en_US": "Time line"
      },
      "type": "item",
      "settings": [
        {
          "type": "card_header",
          "label": {
            "zh_CN": "公共配置",
            "en_US": "Common Config"
          }
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "副标题",
            "en_US": "Subtitle"
          },
          "id": "title",
          "default": "Research"
        },
        {
          "type": "card_text_editor",
          "label": {
            "zh_CN": "简短描述",
            "en_US": "Short description"
          },
          "id": "detail",
          "default": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam "
        },
        {
          "type": "card_color",
          "id": "text_color",
          "label": {
            "zh_CN": "颜色",
            "en_US": "Color"
          },
          "default": "#1D1F21"
        },
        {
          "type": "card_header",
          "label": {
            "zh_CN": "样式1配置",
            "en_US": "Style1 config"
          }
        },
        {
          "type": "card_date_picker",
          "id": "time_text",
          "label": {
            "zh_CN": "日期",
            "en_US": "Date"
          },
          "default": "2023-05-14"
        },
        {
          "type": "card_header",
          "label": {
            "zh_CN": "样式2配置",
            "en_US": "Style2 Config"
          }
        },
        {
          "type": "card_image",
          "label": {
            "zh_CN": "图片",
            "en_US": "Image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议宽度1000px以上，高度自适应",
            "en_US": "Suggested width 1000px or more, height adaptive"
          },
          "id": "image"
        },
        {
          "type": "card_select",
          "label": {
            "zh_CN": "图片位置",
            "en_US": "Image Position"
          },
          "default": "img_right",
          "id": "img_position",
          "option": [
            {
              "label": {
                "zh_CN": "图片居左",
                "en_US": "Image Left"
              },
              "value": "img_left"
            },
            {
              "label": {
                "zh_CN": "图片居右",
                "en_US": "Image Right"
              },
              "value": "img_right"
            }
          ]
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "日期标题",
            "en_US": "Date Title"
          },
          "id": "time_title",
          "default": "Time line"
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "日期文本",
            "en_US": "Date Text"
          },
          "id": "custom_text",
          "default": ""
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "时间轴样式",
        "en_US": "Time Line Style"
      },
      "default": "style1",
      "id": "time_line_style",
      "option": [
        {
          "label": {
            "zh_CN": "样式1",
            "en_US": "Style1"
          },
          "value": "style1"
        },
        {
          "label": {
            "zh_CN": "样式2",
            "en_US": "Style2"
          },
          "value": "style2"
        }
      ]
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "公共配置",
        "en_US": "Common Config"
      }
    },
    {
      "type": "card_layout",
      "label": {
        "zh_CN": "PC内容留白",
        "en_US": "PC content blank"
      },
      "id": "padding"
    },
    {
      "type": "card_layout",
      "label": {
        "zh_CN": "移动端内容留白",
        "en_US": "Mobile content blank"
      },
      "id": "mobile_padding"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "block_title",
      "default": "Timeline"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "id": "block_detail",
      "default": "A few words about the development of your store"
    },
    {
      "type": "card_color",
      "id": "bg_color",
      "label": {
        "zh_CN": "背景颜色",
        "en_US": "Background color"
      },
      "default": ""
    },
    {
      "type": "card_color",
      "id": "title_color",
      "label": {
        "zh_CN": "标题颜色",
        "en_US": "Title color"
      },
      "default": ""
    },
    {
      "type": "card_color",
      "id": "detail_color",
      "label": {
        "zh_CN": "描述颜色",
        "en_US": "Description color"
      },
      "default": ""
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "样式1配置",
        "en_US": "Style1 config"
      }
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "PC端自动滚动",
        "en_US": "Automatic scrolling on the PC"
      },
      "default": true,
      "id": "is_autoplay"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "PC端时间线宽度",
        "en_US": "Time line width on the PC "
      },
      "info": {
        "zh_CN": "<p style='color:var(--color-assist)'>时间线过多时将按预设宽度显示</p>",
        "en_US": "<p style='color:var(--color-assist)'>Too many timelines will be displayed at the preset width</p>"
      },
      "default": "200",
      "id": "line_width",
      "option": [
        {
          "label": {
            "zh_CN": "150px"
          },
          "value": "150px"
        },
        {
          "label": {
            "zh_CN": "200px"
          },
          "value": "200px"
        },
        {
          "label": {
            "zh_CN": "250px",
            "en_US": "250px"
          },
          "value": "250px"
        },
        {
          "label": {
            "zh_CN": "300px",
            "en_US": "300px"
          },
          "value": "300px"
        },
        {
          "label": {
            "zh_CN": "350px"
          },
          "value": "350px"
        }
      ]
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "样式2配置",
        "en_US": "Style2 config"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "展开按钮文案",
        "en_US": "Expand button text"
      },
      "id": "open_btn_text",
      "default": "View more"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "收起按钮文案",
        "en_US": "Collapse button text"
      },
      "id": "close_btn_text",
      "default": "View less"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "开启折叠功能",
        "en_US": "Enable collapse"
      },
      "default": true,
      "id": "is_more"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容",
        "en_US": "Content"
      }
    }
  ],
  "default": {
    "settings": {
      "time_line_style": "style1",
      "padding": {
        "top": "0",
        "left": "0",
        "right": "0",
        "bottom": "0"
      },
      "mobile_padding": {
        "top": "0",
        "left": "0",
        "right": "0",
        "bottom": "0"
      },
      "block_title": "Timeline",
      "block_detail": "A few words about the development of your store",
      "is_autoplay": true,
      "line_width": "200px",
      "bg_color": "",
      "title_color": "#1D1F21",
      "detail_color": "#666666",
      "open_btn_text": "View more",
      "close_btn_text": "View less",
      "is_more": true
    },
    "blocks": [
      {
        "title": "Research",
        "time_text": "1999-05-14",
        "detail": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam ",
        "text_color": "#1D1F21",
        "image": {
          "src": "",
          "alt": ""
        },
        "time_title": "1999",
        "img_position": "img_right",
        "custom_text": "1999-05-14",
        "block_type": "item"
      },
      {
        "title": "Research",
        "time_text": "2000-05-14",
        "detail": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam ",
        "text_color": "#1D1F21",
        "image": {
          "src": "",
          "alt": ""
        },
        "time_title": "2000",
        "img_position": "img_left",
        "custom_text": "2000-05-14",
        "block_type": "item"
      },
      {
        "title": "Research",
        "time_text": "2022-05-14",
        "detail": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam ",
        "text_color": "#1D1F21",
        "image": {
          "src": "",
          "alt": ""
        },
        "time_title": "2022",
        "img_position": "img_right",
        "custom_text": "2022-05-14",
        "block_type": "item"
      },
      {
        "title": "Research",
        "time_text": "2023-05-14",
        "detail": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam ",
        "text_color": "#1D1F21",
        "image": {
          "src": "",
          "alt": ""
        },
        "time_title": "2023",
        "img_position": "img_left",
        "custom_text": "2023-05-14",
        "block_type": "item"
      },
      {
        "title": "Research",
        "time_text": "2025-05-14",
        "detail": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam ",
        "text_color": "#1D1F21",
        "image": {
          "src": "",
          "alt": ""
        },
        "time_title": "2025",
        "img_position": "img_right",
        "custom_text": "2025-05-14",
        "block_type": "item"
      }
    ]
  }
}
{% endschema %}
